<template>
  <div>
    <div style="width: 100%;height:40%;">
      <div style="width:99%;height:95%;margin:2px 2px;border:4px solid #019BA0;">
        <el-row>
          <el-col :span="24"><div style="text-align: center;margin: 10px;font-size: 20px;color:#019BA0;"><i class="el-icon-s-home"></i>设施信息</div></el-col>
        </el-row>
        <el-form style="text-align: left;margin-top: 10px;margin-left: 22px;height: 55px;" :inline="true"
          :model="baseType" class="demo-form-inline">
          <el-form-item label="名称">
            <el-input ref="nameipn" v-model="baseType.name" placeholder="名称" :readonly="isReadonly"></el-input>
          </el-form-item>
          <el-form-item label="经度">
            <el-input v-model="baseType.longitude" placeholder="经度" :readonly="isReadonly"></el-input>
          </el-form-item>
          <el-form-item label="纬度">
            <el-input v-model="baseType.latitude" placeholder="纬度" :readonly="isReadonly"></el-input>
          </el-form-item>
        </el-form>
        <el-form style="text-align: left;margin-left: 22px;" :inline="true" :model="baseType" class="demo-form-inline">
          <el-form-item label="投入使用日期">
            <el-input type="date" v-model="baseType.useTime" readonly></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input style="width: 500px;" v-model="baseType.address" placeholder="地址" :readonly="isReadonly"></el-input>
          </el-form-item>
        </el-form>
        <el-form style="text-align: left;margin-left: 22px;" :inline="true" :model="baseType" class="demo-form-inline">
          <el-form-item label="描述">
            <el-input :readonly="isReadonly"  type="textarea" style="width:400px;" v-model="baseType.describe" placeholder="描述"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button v-show="!isUpdate" type="primary" @click="onStart">编 辑</el-button>
            <el-button v-show="isUpdate" type="primary" @click="onUpdate">保 存</el-button>
             <el-popover
               placement="right"
               width="600"
               trigger="click">
               <el-table :data="asklist">
                 <el-table-column fixed width="100" property="stockName" label="设备名"></el-table-column>
                 <el-table-column width="80" property="askNum" label="申请数量"></el-table-column>
                 <el-table-column width="250" property="reason" label="申请理由"></el-table-column>
                 <el-table-column width="100" property="askTime" label="申请时间"></el-table-column>
                 <el-table-column width="100" property="examineTime" label="批复时间"></el-table-column>
                 <el-table-column width="80" property="id" label="操作">
                      <template slot-scope="scope">
                        <el-popconfirm style="margin-left:10px;"
                            cancelButtonText="取消"
                            confirmButtonText="确定"
                            icon="el-icon-info"
                            iconColor="red"
                            title="确定要删除吗？"
                            @confirm='delAsk(scope.row.id)'>
                           <el-button slot="reference"  type="danger" size="mini" round>删除</el-button>
                        </el-popconfirm>
                      </template>
                 </el-table-column>
                 <el-table-column fixed="right" width="250" property="explain" label="申请状态"></el-table-column>
               </el-table>
               <el-button  slot="reference" style="background-color: #019BA0;color: white;" @click="askList()">申请列表</el-button>
             </el-popover>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="width: 100%;height:48%;">
      <div style="width:99%;height:97%;margin:2px 2px;border:4px solid #019BA0;">
        <el-row>
          <el-col :span="24"><div style="text-align: center;margin: 10px;font-size: 20px;color:#019BA0;"><i class="el-icon-view"></i>所有设备</div></el-col>
        </el-row>
        <div class="bbb">
         <el-table class="tab1"
             :data="tableData"
             stripe
             style="width: 100%">
             <el-table-column prop="no" label="型号" width=""></el-table-column>
             <el-table-column prop="name" label="名称" width=""></el-table-column>
             <el-table-column prop="stockNum" label="总量" width=""></el-table-column>
             <el-table-column prop="useNum" label="使用量" width=""></el-table-column>
             <el-table-column
                  label="操作"
                  width="220">
                  <template slot-scope="scope">
                        <el-button size="mini" @click="table = true;details(scope.row)" round>详情</el-button>
                         <el-popconfirm style="margin-left:10px;"
                             cancelButtonText="取消"
                             confirmButtonText="确定"
                             icon="el-icon-info"
                             iconColor="red"
                             title="该类型下所有设备都将被删除,确定删除么?"
                             @confirm='del(scope.row.devId)'>
                            <el-button slot="reference"  type="danger" size="mini" round>删除</el-button>
                         </el-popconfirm>
                  </template>
              </el-table-column>
         </el-table>

         <!--详情抽屉-->
         <el-drawer
           title=""
           :with-header="false"
           :visible.sync="table"
           direction="rtl"
           size="40%">
           <div  style="color:#019BA0;font-size: 22px;margin:50px;width: 100%;"><span>设备分布及状态</span></div>
           <div  style="font-size: 20px;margin:50px;width: 100%;">
             <span>
               设备类型:<span style="color:#019BA0;">{{equipment}}</span>
               <span style="margin-left:10px;">总量:<span style="color:#007c5b;">{{allNum}}</span></span>
               <span style="margin-left:10px;">已用:<span style="color:#ff0000;">{{useNum}}</span></span>
               <span style="margin-left:10px;">剩余:<span style="color:#007c5b;">{{ExcedenteNum}}</span></span>
               <span style="margin-left:10px;">报废:<span style="color:#ff0000;">{{dumpingNum}}</span></span>
             </span>
            </div>
            <el-table
            :data="gridData"
            stripe
            height="450">
               <el-table-column property="childName" label="设备编号" width="300"></el-table-column>
               <el-table-column property="childStatus" label="状态" width="100">
                 <template slot-scope="scope">
                   <el-button v-if="scope.row.childStatus=='良好'" type="success" size="mini" round>良好</el-button>
                   <el-button v-if="scope.row.childStatus=='检修'" type="warning" size="mini" round>检修</el-button>
                   <el-button v-if="scope.row.childStatus=='报废'" type="danger" size="mini" round>报废</el-button>
                 </template>
               </el-table-column>
               <el-table-column
                    label="操作"
                    width="200">
                    <template slot-scope="scope">
                          <el-button size="mini" @click="upVisible = true;goUpdate(scope.row)" round>修改</el-button>
                          <el-popconfirm  v-if="scope.row.childStatus=='检修'"  style="margin-left:10px;"
                               cancelButtonText="取消"
                               confirmButtonText="确定"
                               title="上报维修订单?"
                               @confirm='serviceChild(scope.row)'>
                              <el-button slot="reference"  type="warning" size="mini" round>报修</el-button>
                          </el-popconfirm>
                          <el-button  v-if="scope.row.childStatus=='已报修'" type="warning" size="mini" disabled  round>已报修</el-button>
                          <el-popconfirm  v-if="scope.row.childStatus=='报废'"  style="margin-left:10px;"
                               cancelButtonText="取消"
                               confirmButtonText="确定"
                               icon="el-icon-info"
                               iconColor="red"
                               title="确认已替换?"
                               @confirm='delChild(scope.row.id)'>
                              <el-button slot="reference"  type="danger" size="mini" round>替换</el-button>
                          </el-popconfirm>
                    </template>
                </el-table-column>
             </el-table>
             <el-row>
               <el-col :span="24" style="text-align: center;margin-top: 10px;">
                 <el-button type="success" @click="addNum()" class="btn1" plain>添加</el-button>
                 <el-button  @click="askVisible=true" class="btn1" plain>申请</el-button>
               </el-col>
             </el-row>
         </el-drawer>

         <!--添加框 -->
         <el-dialog  title="添加" :visible.sync="addVisible" :closeOnClickModal='false' :show-close='false'>
             <el-form  :model="divAdd" :rules="rules" ref="ruleForm">
             <el-row>
                 <el-col :span="24">
                 <el-form-item label="设施编号" label-width="80px" prop="childName">
                     <el-input v-model="divAdd.childName" placeholder="请输入设施编号"></el-input>
                 </el-form-item>
             </el-col>
             </el-row>
             </el-form>
             <div slot="footer" class="dialog-footer">
                 <el-button @click="addVisible = false;closeForm('ruleForm')">关 闭</el-button>
                 <el-button type="primary" @click="doAdd('ruleForm')">添加</el-button>
             </div>
         </el-dialog>

         <!--申请维修框 -->
         <el-dialog  title="设备损坏描述" :visible.sync="serVisible" :closeOnClickModal='false' :show-close='false'>
             <el-form  :model="ser" :rules="rules" ref="ruleForm">
             <el-row>
                 <el-col :span="24">
                 <el-form-item label="设备损坏描述" label-width="150px" prop="miaoshu">
                     <el-input v-model="ser.miaoshu" placeholder="请填写设备损坏描述"></el-input>
                 </el-form-item>
             </el-col>
             </el-row>
             </el-form>
             <div slot="footer" class="dialog-footer">
                 <el-button @click="serVisible = false;closeForm('ruleForm')">关 闭</el-button>
                 <el-button type="primary" @click="doSer('ruleForm')">报修</el-button>
             </div>
         </el-dialog>

         <!--数量不够申请框 -->
         <el-dialog  title="设备不够,需申请" :visible.sync="askVisible" :closeOnClickModal='false' :show-close='false'>
             <el-form  :model="ask" :rules="askRules" ref="ruleForm">
             <el-row>
                 <el-col :span="24">
                 <el-form-item label="设备申请理由" label-width="150px" prop="reason">
                     <el-input v-model="ask.reason" placeholder="请填写设备申请理由"></el-input>
                 </el-form-item>
                 </el-col>
             </el-row>
             <el-row>
                 <el-col :span="10">
                   <el-form-item label="申请数量" label-width="150px" prop="askNum">
                       <el-input v-model="ask.askNum" placeholder="请填写申请数量"></el-input>
                   </el-form-item>
                 </el-col>
             </el-row>
             </el-form>
             <div slot="footer" class="dialog-footer">
                 <el-button @click="askVisible = false;closeForm('ruleForm')">关 闭</el-button>
                 <el-button type="primary" @click="doAsk('ruleForm')">申 请</el-button>
             </div>
         </el-dialog>

         <!--修改框 -->
         <el-dialog  title="修改" :visible.sync="upVisible" :closeOnClickModal='false' :show-close='false'>
             <el-form  :model="div" :rules="divRules" ref="ruleForm">
             <el-row>
                 <el-col :span="10">
                 <el-form-item label="设施编号" label-width="80px" prop="childName">
                     <el-input v-model="div.childName" placeholder="请输入设施编号"></el-input>
                 </el-form-item>
             </el-col>
             <el-col :span="10">
                 <el-form-item label="状态" label-width="80px" prop="childStatus">
                      <el-select v-model="div.childStatus" placeholder="请选择">
                         <el-option label="良好" value="良好"></el-option>
                         <el-option label="检修" value="检修"></el-option>
                         <el-option label="报废" value="报废"></el-option>
                      </el-select>
                 </el-form-item>
             </el-col>
             </el-row>
             </el-form>
             <div slot="footer" class="dialog-footer">
                 <el-button @click="upVisible = false;closeForm('ruleForm')">关 闭</el-button>
                 <el-button type="primary" @click="doDev('ruleForm')">修改</el-button>
             </div>
         </el-dialog>

         </div>
         <el-pagination class="pag"
             layout="prev, pager, next"
             :total="total"
             :page-size='pageSize'
             @current-change='change'>
         </el-pagination>
      </div>
    </div>
    <div style="width: 100%;height:20.5%;">
      <div style="width:99%;height:95%;margin:2px 2px;border:4px solid #019BA0;">

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
         stocks:[],
         isReadonly:true,
         isUpdate:false,
         baseid:0,
         baseType: {
           id:'',
           baseId:0,
           name:'',
           longitude: '',
           latitude: '',
           useTime:'',
           address:'',
           describe:''
         },
        tableData:[],
        total:10,
        pageSize:4,
        pageIndex:1,
        table:false,
        addVisible:false,
        upVisible:false,
        equipment:0,
        allNum:0,
        useNum:0,
        ExcedenteNum:0,
        dumpingNum:0,
        id:'',
        div:{
          id:'',
          stockChildId:'',
          childName:'',
          childStatus:'',
        },
        divAdd:{
          stockChildId:'',
          childName:'',
          childStatus:'良好',
        },
        serVisible:false,
        ser:{
          miaoshu:'',
        },
        askVisible:false,
        ask:{
          reason:'',
          askNum:'',
        },
        askRules:{
          reason: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          askNum: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          {
           pattern:'^[1-9]\\d*$',
           message: '不是正整数',
           trigger: 'blur'
          }]
        },
        divRules:{
          childName: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          childStatus: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
        },
        rules:{
          miaoshu: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          childName: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          childStatus: [{
             required: true,
             message: '不能为空',
             trigger: 'blur'
           }],
        },
        gridData:[],
        deviceId:'',
        describe:'',
        asklist:[],
      }
    },
    methods: {
        delAsk(id){
          this.axios.get("/ask/delBaseAsk?id="+id).then(res=>{
                if(res.data.code==200){
                  this.sucMsg("删除成功");
                }
          })
        },
        addNum(){
          if(this.ExcedenteNum==0){
            this.askVisible=true;

          }else{
            this.addVisible=true;
          }

        },
        serviceChild(child){
          this.div.id=child.id;
          this.div.childName=child.childName;
          this.div.childStatus='已报修';
          this.deviceId=child.id;
          this.serVisible=true;

        },
        doSer(ruleForm){
          this.$refs[ruleForm].validate((valid) => {
              if (valid) {
                 this.axios.post("/child/updateChild",this.div).then(res=>{
                   if(res.data.code=200){
                      //报修申请
                      this.axios.get("/service/basechild?deviceId="+this.deviceId+"&describe="+this.ser.miaoshu).then(res=>{
                           if(res.data.code=200){
                             this.sucMsg("已报修,请等待维修");
                           }
                      })

                      this.serVisible=false;
                      this.axios.get("/child/getChild?id="+this.id).then(res=>{
                         this.gridData=res.data.data;
                      });

                   }

                 });
               }
          });
        },
        delChild(id){
          if(this.ExcedenteNum!=0){
            this.axios.get("/child/delChildDevice?ChildId="+this.div.stockChildId+"&id="+id).then(res=>{
                if(res.data.code=200){
                   this.axios.get("/child/getChild?id="+this.id).then(res=>{
                      this.gridData=res.data.data;
                   })
                   this.useNum=this.useNum+1;
                   this.ExcedenteNum=this.ExcedenteNum-1;
                   this.dumpingNum=this.dumpingNum+1;
                   this.getBaseDevice();
                   this.sucMsg(res.data.msg);
                }
            });
          }else{
            this.errorMsg("数量不够,请点击下方'申请按钮'进行设备申请");
          }
        },
        askList(){
           this.axios.get("/ask/getBaseMyself?baseId="+this.baseid).then(res=>{
               this.asklist=res.data.data;
           });
        },
        doAsk(ruleForm){
          this.$refs[ruleForm].validate((valid) => {
              if (valid) {
                 this.axios.get("/ask/askStock?id="+this.id+"&reason="+this.ask.reason+"&askNum="+this.ask.askNum).then(res=>{
                     if(res.data.code=200){
                       this.askVisible = false;
                       this.sucMsg("申请成功,等待批复")
                     }
                 });
              }
          })
        },
        del(id){
          this.axios.get("/device/delDeviceAndChild?id="+id).then(res=>{
              if(res.data.code=200){
                 this.getBaseDevice();
                 this.sucMsg(res.data.msg);
              }
          })
        },
        doAdd(ruleForm){
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                  this.axios.post("/child/addChild",this.divAdd).then(res=>{
                    if(res.data.code=200){
                       this.addVisible=false;
                       this.axios.get("/child/getChild?id="+this.id).then(res=>{
                          this.gridData=res.data.data;
                       });
                       this.useNum=this.useNum+1;
                       this.ExcedenteNum=this.ExcedenteNum-1;
                       this.dumpingNum=this.dumpingNum;
                       this.getBaseDevice();
                       this.sucMsg(res.data.msg);
                    }

                  });

                }
            })
        },
        doDev(ruleForm){
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                  this.axios.post("/child/updateChild",this.div).then(res=>{
                    if(res.data.code=200){
                       this.upVisible=false;
                       this.axios.get("/child/getChild?id="+this.id).then(res=>{
                          this.gridData=res.data.data;
                       });
                       this.sucMsg(res.data.msg);
                    }

                  });

                }
            })
        },
        details(device){
            this.equipment=device.name;
            this.allNum=device.stockNum;
            this.useNum=device.useNum;
            this.ExcedenteNum=device.stockNum-device.useNum-device.dumpingNum;
            this.dumpingNum=device.dumpingNum;
            this.div.stockChildId=device.devId;
            this.div.id=device.devId;
            this.divAdd.stockChildId=device.devId;
            this.id=device.devId;
            this.axios.get("/child/getChild?id="+this.id).then(res=>{
               this.gridData=res.data.data;
            })
        },
        goUpdate(device){
           this.div.id=device.id;
           this.div.childName=device.childName;
           this.div.childStatus=device.childStatus;
        },
        closeForm(ruleForm) {
          this.$refs[ruleForm].resetFields();
          this.clear();
        },
        clear(){
          this.div.stockChildId='';
          this.div.childName='';
          this.div.childStatus='';
          this.ser.miaoshu='';
          this.ask.askNum=''
          this.ask.reason=''
        },
        getBasePor(){
          this.axios.get("/base/getBaseType?id="+this.baseid).then(res=>{
            let por=res.data.data;
            this.baseType.id=por.id;
            this.baseType.baseId=this.baseid;
            this.baseType.name=por.name;
            this.baseType.longitude=por.longitude;
            this.baseType.latitude=por.latitude;
            this.baseType.useTime=por.useTime;
            this.baseType.address=por.address;
            this.baseType.describe=por.describe;
          })
        },
        getBaseDevice(){
            this.axios.get("/base/getBaseStock?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize+"&id="+this.baseid).then(res=>{
              this.tableData=res.data.data.list;
              this.total=res.data.data.total;
              this.pageSize=res.data.data.pageSize;
            });
        },
        change(index){
            this.pageIndex=index;
            this.getBaseDevice();
        },
        onStart(){//打开编辑功能
            this.isReadonly=false;
            //文本框自动聚焦
            this.$refs.nameipn.focus();
            this.isUpdate=true;
        },
        onUpdate(){//修改
           this.axios.post("/base/updateBaseType",this.baseType).then(res=>{
               if(res.data.code==200){
                     this.isUpdate=false;
                     this.getBasePor();
                     //this.$router.push("/device/base");
                     this.sucMsg("修改成功");
                     this.isReadonly=true;
               }
           })
        },
        sucMsg(msg) {
              this.$message({
                message: msg,
                offset:150,
                duration:1000,
                type: 'success'
              });
        },
        errorMsg(msg) {
            this.$message.error({
              message: msg,
              offset:150,
              duration:2000
            });
        }
    },
    created(){
        this.baseid=8;
        this.getBasePor();
        this.getBaseDevice();
    },
    watch: {
        '$route' () {
          // 监听路由变化，获取basseid
          this.baseid = this.$route.params.id;
          /* if(this.$route.path=='/device/base'){
             this.$router.push("/property/8");
          } */
        },
        'baseid' () {
    	  // 监听 baseid，发生改变就调用方法
          this.isReadonly=true;
          this.isUpdate=false;
          this.getBasePor();
          this.getBaseDevice();
        }
    }
  }
</script>

<style scoped="scoped">

  .el-container {
    margin: 0;
    padding: 0;
    margin-top:5px;
    margin-left: 5px;
    width:1300px;
    height:640px;
  }
  .el-aside {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    border:5px solid #F3F3F3;
    text-align: center;
  }

  .el-main {
    margin: 0;
    padding: 0;
    margin-left:3px;
    border:5px solid #F3F3F3;
    background-color: #ffffff;
    color: #333;
  }

  .el-submenu{
    width:200px;
  }
  .el-menu-item{
  }
  .is-active{
    font-size: 18px;
    background-color: aquamarine;
  }
 .tab1{
      margin-left: 10px;
  }
  .pag{
      text-align: center;
      margin-top:-20px;
      margin-bottom: 10px;
  }
  .bbb{
      width:1025px;
      height:280px;
  }

</style>
